<template>
  <div id="cpn-drawer-field">
    <el-drawer :visible.sync="visiblex" :title="title" :size="width" :with-header="withHeader"
      :wrapper-closable="wrapperClosable" :append-to-body="appendToBody" :before-close="onClose" @opened="opened"
      @closed="closed">
      <slot slot="title" name="title"></slot>
      <slot name="bar"></slot>
      <div class="custom-drawer-scroll__body">
        <slot></slot>
      </div>
      <div v-if="withFooter" class="custom-drawer__footer">
        <slot name="footer-tip"></slot>
        <div class="custom-drawer__button-wrap">
          <el-button class="custom-drawer__button" size="small" @click="handleCancel">取消</el-button>
          <el-button class="custom-drawer__button" size="small" type="primary" @click="handleConfirm">确认</el-button>
        </div>
      </div>
      <slot v-else slot="footer" name="footer"></slot>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: 'drawer-field',
  data() {
    return {
      isDisable: true
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '720px'
    },
    withHeader: {
      type: Boolean,
      default: true
    },
    withFooter: {
      type: Boolean,
      default: true
    },
    appendToBody: {
      type: Boolean,
      default: true
    },
    wrapperClosable: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    visiblex: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  methods: {
    handleConfirm() {
      //
      if (this.isDisable) {
        this.isDisable = false
        this.$emit('confirm')
        setTimeout(() => {
          this.isDisable = true
        }, 3000)
      }
    },
    handleCancel() {
      this.$emit('cancel')
      this.visiblex = false
    },
    onClose(done) {
      this.$emit('close')
      done()
    },
    opened() {
      this.$emit('opened')
    },
    closed() {
      this.$emit('closed')
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-drawer__header {
  height: 48px;
  background: $themeColor;
  margin: 0;
  padding: 0 20px;
  color: $white;
  line-height: 48px;
}

::v-deep .el-drawer__body {
  height: calc(100vh - 48px - 64px);
  display: flex;
  flex-direction: column;
}

.custom-drawer-scroll__body {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.custom-drawer__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 20px;
  border-top: 1px solid #e0e0e0;
}

.custom-drawer__button-wrap {
  flex: 1;
  text-align: right;
}

.custom-drawer__button {
  padding: 6px 26px;
  font-size: 14px;
  line-height: 18px;

  &+& {
    margin-left: 20px;
  }
}

::v-deep .el-drawer__close-btn {
  transform: translateX(9px);
}
</style>
